<template>
  <div class="screen">
    <div class="container">
      <div class="head flex">
        <div class="head-title flex">
          <i class="el-icon-s-goods"></i>
          <p class="font-bold px-4">商品列表</p>
        </div>
        <div class="head-select flex">
          <el-checkbox v-model="radiochecked" fill="#2469e5" @change="change"
            >仅看寄售</el-checkbox
          >
          <div class="list-select">
            <el-radio-group v-model="listFilterRadio" @change="change">
              <el-radio-button label="0">编号排序</el-radio-button>
              <el-radio-button label="1">价格排序</el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </div>
      <div class="body-list rounded-lg text-sm">
        <div class="list-type flex">
          <div class="type" v-for="(item, index) in listType" :key="index">
            {{ item }}
          </div>
        </div>
        <div class="list-content">
          <div
            class="content flex"
            v-for="(item, index) in filterList"
            :key="index"
            :class="{ unBuy: item.itemstate == 0 }"
          >
            <div class="content-child id">{{ item.numbering }}</div>
            <div class="content-child name">{{ item.name }}</div>
            <div class="content-child identification">{{ item.numbering }}</div>
            <div class="content-child state">
              <p class="inline bg-font-color text-white text-xs">
                {{ item.itemstate == 1 ? "在售" : "未寄售" }}
              </p>
            </div>
            <div class="content-child price">{{ item.price }}</div>
            <div class="content-child button">
              <button class="text-font-color" @click="toInfo(item)">
                查看详情
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      radiochecked: true,
      radiocolor: "#2469e5",
      listFilterRadio: 1,
      filterList: [],
      listType: ["编号", "商品名称", "标识", "状态", "售价", "详情"],
      groupName: "",
      listArr: [],
      query: {},
    };
  },
  mounted() {
    this.change();
  },
  methods: {
    getItems() {
      console.log(this.query);
      this.$axios.postInfo("/items", this.query).then((res) => {
        console.log(res);
        let itemGroup = res.itemGroup;
        let items = res.items;
        // this.groupName = itemGroup[items[0].group - 1].name;
        this.listArr = [];
        for (let i = 0; i < items.length; i++) {
          // console.log(items[i])
          if(items[i].price==0)
            items[i].price=items[i].iprice
          this.listArr.push(items[i]);
        }
        console.log(this.listArr);

        this.filterList = this.listArr.slice(0);

        if (this.listFilterRadio == 1) {
          this.filterList.sort((x, y) => {
            console.log(this.listFilterRadio);
            return x.price - y.price;
          });
        } else {
          this.filterList.sort((x, y) => {
            return x.numbering - y.numbering;
          });
        }
      });
    },
    updateItems() {
      this.getItems(this.query);
    },
    change(value) {
      if (this.radiochecked == true) {
        this.query.itemState = 1;
      } else {
        this.query.itemState = "all";
      }
      this.getItems(this.query);
    },
    toInfo(value) {
      console.log(value);
      this.$router.push({
        path: "item",
        query: {
          group: value.group,
          numbering: value.numbering,
          itemState: value.itemstate,
        },
      });
    },
  },
  created() {
    this.query = this.$route.query;
    console.log(this.query);
    this.change(true);
  },
};
</script>

<style lang="less" scoped>
.screen {
  width: 100%;
  // height: 100vh;
  min-height: 70vh;

  margin-top: 70px;

  .container {
    max-width: 1200px;
    padding: 1rem;

    .head {
      width: 100%;
      align-items: center;
      justify-content: space-between;

      .head-title {
        align-items: center;

        i {
          color: #2469e5;
          font-size: 30px;
        }
      }

      .head-select {
        align-items: center;

        /deep/ .el-checkbox {
          .el-checkbox__input {
          }
        }

        .list-select {
          padding: 0 1rem;

          .el-radio-group {
            border-radius: 24px;
            background: #c6c9cc;

            .el-radio-button {
              border-radius: 24px;
              padding: 0 0.1rem;

              /deep/ .el-radio-button__inner {
                border: none;
                border-radius: 24px;
                padding: 0.4rem 1rem;
                background: transparent;
              }

              /deep/
                .el-radio-button__orig-radio:checked
                + .el-radio-button__inner {
                background: #2469e5;
                border-color: #2469e5;
              }
            }
          }
        }
      }
    }

    .body-list {
      margin: 2rem 0;
      padding: 0rem 3rem;
      background: #fff;

      .list-type {
        position: relative;
        padding: 1rem;
        padding-bottom: 0rem;
        margin: 1rem 0;
        @apply text-gray-400;

        .type {
          flex: 1;
        }

        .type:nth-child(1) {
          text-align: left;
          padding-left: 1rem;
        }

        .type:nth-child(2) {
          flex: 2;
        }

        .type:nth-child(3) {
          flex: 2;
        }
      }

      .list-content {
        position: relative;
        padding: 1rem;
        margin: 1rem 0;
        margin-top: -1rem;

        .content {
          position: relative;
          padding: 0.5rem 0;

          .content-child {
            flex: 1;
          }

          .content-child:nth-child(1) {
            text-align: left;
            padding-left: 1rem;
          }

          .content-child:nth-child(2) {
            flex: 2;
          }

          .content-child:nth-child(3) {
            flex: 2;
          }

          .state {
            p {
              padding: 0.3rem 1rem;
            }
          }

          .button {
            button {
              @apply text-xs;
            }
          }
        }

        .unBuy {
          @apply bg-blue-50;
          @apply text-gray-400;

          .state p {
            @apply bg-gray-400;
          }
        }

        .content:after {
          content: "";
          position: absolute;
          width: 100%;
          height: 1px;
          bottom: 0%;
          @apply bg-gray-200;
        }
      }
    }
  }
}

//修改element-ui样式

/deep/ .el-checkbox__inner {
  // background: #2469e5;
  border-color: #2469e5;
  border-radius: 50%;
}

/deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background: #2469e5;
  border-color: #2469e5;
  border-radius: 50%;
}

/deep/ .el-checkbox__label {
  color: #2469e5;
}

/deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #2469e5;
}
</style>